<template><!--原始打卡记录-->
  <el-scrollbar height="670px">
    <div style="background-color: #f1f1f1;padding: 20px 14px 0px 14px;height:650px">
      <div style="display: flex;padding: 0px 20px;height:40px;border-bottom: 1px solid #0270C1;background-color: white">
        <div>
          <svg t="1665642666854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4288" width="32" height="32"><path d="M488.96 960c74.24 0 145.92-17.92 209.92-53.76 10.24-5.12 17.92-15.36 17.92-28.16 0-12.8-5.12-23.04-15.36-30.72-10.24-5.12-23.04-5.12-33.28 0-53.76 30.72-115.2 46.08-179.2 46.08-202.24 0-366.08-163.84-366.08-366.08 0-192 145.92-348.16 332.8-366.08v366.08c0 17.92 15.36 33.28 33.28 33.28h401.92c17.92 0 33.28-15.36 33.28-33.28 0-238.08-194.56-432.64-432.64-432.64-238.08 0-435.2 194.56-435.2 432.64-2.56 238.08 192 432.64 432.64 432.64z m366.08-465.92h-332.8v-332.8c176.64 15.36 314.88 156.16 332.8 332.8z m0 0" p-id="4289" fill="#1296db"></path><path d="M819.2 688.64c-7.68 17.92-17.92 35.84-30.72 51.2-10.24 15.36-7.68 35.84 7.68 46.08 15.36 10.24 35.84 7.68 46.08-7.68 12.8-20.48 25.6-38.4 35.84-61.44 7.68-15.36 2.56-35.84-15.36-43.52-15.36-7.68-35.84-2.56-43.52 15.36z m0 0" p-id="4290" fill="#1296db"></path></svg>        </div>
        <div style="text-align: center;line-height: 40px;">原始打卡记录</div>
        <div></div>
      </div>
      <div>
        <div style="margin:20px 10px 10px 10px;background-color: white">
          <table class="table">
            <tr>
              <th>
                查看范围：
              </th>
              <td>
                <div style="display: flex;">
                  <div>
                    <el-radio-group @change="changePerson(vale)" v-model="radio1">
                      <el-radio-button label="公司" />
                      <el-radio-button label="部门" />
                      <el-radio-button label="本人" />
                    </el-radio-group>
                  </div>
                  <div>
                    <el-input
                        v-model="input2"
                        class="w-50 m-2"
                        placeholder="请输入员工工号"
                        @input="onchange"
                    />
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th>时间范围：</th>
              <td>
                <div style="display: flex">
                  <div>
                    <el-radio-group v-model="radio" @change="changeRadio(vale)">
                      <el-radio-button label="今天" />
                      <el-radio-button label="本周" />
                      <el-radio-button label="本月" />
                      <el-radio-button label="本年" />
                      <el-radio-button label="指定日期范围" />
                    </el-radio-group>
                  </div>
                  <div>
                    <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="To"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="default"
                        v-if="value1state"
                        @change="ccc()"
                    />
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="display: flex;margin-right: 10px;flex-direction: row-reverse">
        <el-button type="primary" style="margin-left: 12px;">导出Excel</el-button>
<!--        <el-button type="primary" @click="select()">查询</el-button>-->
      </div>
      <div style="margin:20px 10px 10px 10px;">
        <el-table :data="tableData" style="width: 100%;height: 373px">
          <el-table-column align="center" prop="empName" label="姓名"/>
          <el-table-column align="center" prop="deptName" label="部门"/>
          <el-table-column align="center" prop="userAt" label="工号"/>
          <el-table-column align="center" prop="date" label="日期">
            <template #default="props">
              {{props.row.atTime.slice(0,10)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="上班">
            <el-table-column align="center" prop="atStarTime" label="打卡时间">
              <template #default="props">
                <span v-if="props.row.atStarTime">{{props.row.atStarTime.slice(11)}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="atStarRes" label="打卡结果">
              <template #default="props">
                <span style="color: red" v-if="props.row.atStarRes=='迟到'||props.row.atStarRes=='严重迟到'">
                {{props.row.atStarRes}}
                </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="下班">
            <el-table-column align="center" prop="atEndTime" label="打卡时间">
              <template #default="props">
                <span v-if="props.row.atEndTime">{{props.row.atEndTime.slice(11)}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="atEndRes" label="打卡结果">
              <template #default="props">
                <span style="color: dodgerblue" v-if="props.row.atEndRes=='早退'||props.row.atEndRes=='严重早退'">
                {{props.row.atEndRes}}
                </span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div>
          <el-row justify="center">
            <el-col>
              <el-pagination
                  v-model:currentPage="pageNo"
                  v-model:page-size="pageSize"
                  :page-sizes="[5,10, 20, 30, 40]"

                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tableData==null?0:tableData.length"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {reactive, ref} from "vue";
import { Search } from '@element-plus/icons-vue'
import {onBeforeMount} from "@vue/runtime-core";
import axios from "axios";
import moment from "moment";
import {useStore} from "vuex";
const store =useStore()
const select=()=>{
  if(input2.value!=null){
    radio1.value=''
    OriginalVo.userNo=input2.value
  }
  getOrgina();
}
const ccc=()=>{
  getOrgina()
}
//本月原始打卡记录
const getOrgina=()=>{
  if(radio1.value=='本人'){
    OriginalVo.userNo=store.state.user.sysEmployee.empCard
  }
  if(radio.value=='本周'){
    OriginalVo.day='本周'
  }
  if(radio.value=='本月'){
    OriginalVo.day='本月'
  }
  if(radio.value=='今天'){
    OriginalVo.day='今天'
  }
  if(radio.value=='指定日期范围'){
    OriginalVo.start=moment(value1.value[0]).format('yyyy-MM-DD')
    OriginalVo.end=moment(value1.value[1]).format('yyyy-MM-DD')
  }
  axios.post("checkOa/attendance/query",OriginalVo).then((res) => {
    tableData.value=res.data.data
  })
}
const changePerson=(va)=>{
  input2.value=''
  if(radio1.value=="部门"){
    OriginalVo.userNo=''
    OriginalVo.userDept=store.state.user.sysEmployee.dept.deptName
  }
  if(radio1.value=="公司"){
    OriginalVo.userDept=''
    OriginalVo.userNo=''
  }
  getOrgina();
}
onBeforeMount(function () {
  getOrgina(OriginalVo);
})
const OriginalVo=reactive({
  userNo:'',
  start:'',
  end:'',
  userDept:'',
  day:''
})
//人物搜索框
const userNo = ref('')
//table数据
const tableData = ref([])
//时间栏
const value1 = ref('')
//时间是否显示
let value1state=ref(false);
//单选框
const radio=ref("本月")
const radio1 = ref("本人")
//工号输入框
const input2=ref('')
const changeRadio=(vale)=>{
  OriginalVo.day=radio.value
  if(radio.value=='指定日期范围'){
    value1state.value=true
  }else{
    value1state.value=false
  }
  getOrgina();
}
//复选框
const checked1 = ref(true)
const checked2 = ref(true)
const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(true)
const checked6 = ref(true)
const checked7 = ref(true)
const checked8 = ref(true)
const onchange=()=>{
  if(input2.value!=null){
    radio1.value=''
    OriginalVo.userNo=input2.value
  }
  getOrgina();
}
//分页
const pageNo =ref();
const pageSize=ref();
//分页方法
const sizeChange = (size) => {
  pageSize.value = size;
  //getData(d.pageNo);
}
const currentChange = (pageNo) => {
  //getData(pageNo);
}
</script>

<style>
.table th{
  border-bottom: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  font-weight: 30;
  background-color: #F4F4F4;
  padding: 18px 15px;
  width: 150px;
}
.table{
  border-left: 1px solid #D2D2D2;
  border-top: 1px solid #D2D2D2;
  width: 100%;
  border-spacing:0;
}
.table td{
  border-bottom: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  padding-left:20px ;
}
.el-date-editor{
  margin-left: 10px;
}
.el-radio-button{
  margin-right: 10px;
}
</style>